<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素居中</title>
    <style>
        /* 1.子元素宽高固定 */
        /* 公共代码 */
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }

        .box {
            background: green;    
        }

        .box.size{
            width: 100px;
            height: 100px;
        }
        /*1. absolute + 负margin */
        /* .wp{
            position: relative;
        }
        .box.size{
            position:absolute;
            top:50%;/*top是相对父容器的大小
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        } */
        /* 2.absolute+margint auto */
        /* .wp{
            position: relative;
        }
        .box.size{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        } */
        /* 3.absolute+calc */
        /* .wp{
            position: relative;
        }
        .box.size{
            position: absolute;
            top:calc(50% - 50px);
            left:calc(50% - 50px);
        } */
        /* 二、不需要固定子元素宽高 */
        /* 4.absolute + transform */
        /* .wp{
            position: relative;
        }
        .box.size{
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        } */
        /* 5.lineheight */
        /* .wp {
            line-height: 300px;
            text-align: center;
            font-size: 0px;
        }
        .box {
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            line-height: initial;
            text-align: left; /* 修正文字 
        } */
        /* 6.css-table */
        /* .wp{
            display:table-cell;
            text-align: center;
            vertical-align:middle;
        }
        .box{
            display: inline-block;
        } */
        /* 7.flex */
        /* .wp{
            display: flex;
            justify-content: center;
            align-items: center;
        } */
        /* 8.grid */
        .wp{
            display: grid;
        }
        .box{
            align-self: center;
            justify-self: center;
        }
        .red {
            color: red
        }

        .blue {
            color: blue
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box size">123123</div>
    </div>
    <div class="red blue">123</div>
    <div class="blue red">123</div>
</body>
</html>